import 'package:flutter/material.dart';

import '../../Utils/ColorUtil.dart';

class WrapDemo extends StatelessWidget {
  const WrapDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Wrap')),
      // 创建换行布局
      body: Wrap(
        // 扩展方式，横向堆砌
        direction: Axis.horizontal,
        // 对齐方式
        alignment: WrapAlignment.spaceEvenly,
        // 主轴空隙间距
        spacing: 0,
        // row的对齐方式
        runAlignment: WrapAlignment.start,
        // row空隙间距
        runSpacing: 0,
        // 交叉轴对齐方式
        crossAxisAlignment: WrapCrossAlignment.start,
        // 文本对齐方向
        textDirection: TextDirection.ltr,
        // 确定垂直放置子元素的顺序，以及如何在垂直方向上解释开始和结束。 默认down
        verticalDirection: VerticalDirection.down,
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(2),
            constraints: const BoxConstraints(
              // maxHeight: 30,
              // maxWidth: 100,
                minHeight: 10,
                minWidth: 10),
            decoration: const BoxDecoration(
              // color: ColorUtil.primary
            ),
            child: const Text(
              'hello',
              style: TextStyle(color: ColorUtil.primary, fontSize: 30),
              overflow: TextOverflow.fade,
            ),
          ),
          Container(
            padding: const EdgeInsets.all(2),
            constraints: const BoxConstraints(
              // maxHeight: 30,
              // maxWidth: 100,
                minHeight: 10,
                minWidth: 10),
            decoration: const BoxDecoration(
              // color: ColorUtil.primary
            ),
            child: const Text(
              'hello',
              style: TextStyle(color: ColorUtil.primary, fontSize: 30),
              overflow: TextOverflow.fade,
            ),
          ),Container(
            padding: const EdgeInsets.all(2),
            constraints: const BoxConstraints(
              // maxHeight: 30,
              // maxWidth: 100,
                minHeight: 10,
                minWidth: 10),
            decoration: const BoxDecoration(
              // color: ColorUtil.primary
            ),
            child: const Text(
              'hello',
              style: TextStyle(color: ColorUtil.primary, fontSize: 30),
              overflow: TextOverflow.fade,
            ),
          ),Container(
            padding: const EdgeInsets.all(2),
            constraints: const BoxConstraints(
              // maxHeight: 30,
              // maxWidth: 100,
                minHeight: 10,
                minWidth: 10),
            decoration: const BoxDecoration(
              // color: ColorUtil.primary
            ),
            child: const Text(
              'hello',
              style: TextStyle(color: ColorUtil.primary, fontSize: 30),
              overflow: TextOverflow.fade,
            ),
          ),Container(
            padding: const EdgeInsets.all(2),
            constraints: const BoxConstraints(
              // maxHeight: 30,
              // maxWidth: 100,
                minHeight: 10,
                minWidth: 10),
            decoration: const BoxDecoration(
              // color: ColorUtil.primary
            ),
            child: const Text(
              'hello',
              style: TextStyle(color: ColorUtil.primary, fontSize: 30),
              overflow: TextOverflow.fade,
            ),
          ),Container(
            padding: const EdgeInsets.all(2),
            constraints: const BoxConstraints(
              // maxHeight: 30,
              // maxWidth: 100,
                minHeight: 10,
                minWidth: 10),
            decoration: const BoxDecoration(
              // color: ColorUtil.primary
            ),
            child: const Text(
              'hello',
              style: TextStyle(color: ColorUtil.primary, fontSize: 30),
              overflow: TextOverflow.fade,
            ),
          ),Container(
            padding: const EdgeInsets.all(2),
            constraints: const BoxConstraints(
              // maxHeight: 30,
              // maxWidth: 100,
                minHeight: 10,
                minWidth: 10),
            decoration: const BoxDecoration(
              // color: ColorUtil.primary
            ),
            child: const Text(
              'hello',
              style: TextStyle(color: ColorUtil.primary, fontSize: 30),
              overflow: TextOverflow.fade,
            ),
          ),
        ],
      ),
    );
  }
}